<template>
  <div>
    <div class="container_main">

      <div class="FzDiaoBox" v-if="myDialogVisble">
        <div class="title">
          <div class="tab" style="font-size: 12px;">最严重时刻潮流值:{{ Number(this.seriousValue).toFixed(2) }}MW({{
            this.timeNow }})</div>
          <div class="tab" style="font-size: 12px;">负载率:{{ this.fzl }}%</div>
          <div class="el-icon-error" @click="myDialogVisble = false" style="cursor: pointer;color: #2e6e6a;"></div>
        </div>
        <div class="dialogEchart" ref="dialogEchartRef">

        </div>

      </div>

      <div class="container_left">
        <div class="left">
          <!-- <div v-for="it.">shijie</div> -->
          <el-timeline style="width: 100%">
            <el-popover v-for="(activity, index) in timeLineList" :key="index" placement="right"
              :width="index == 0 ? '240' : index == 24 ? '10' : '316'" trigger="click">

              <el-button v-if="index !== 0"
                :type="(activity.timestamp).slice(0, 2) + ':00' == timeNow ? 'primary' : 'info'" size="mini"
                @click="changeTimeEvt(activity, '00', 0)">{{ addMinutesToTime(activity.timestamp, "00") }}</el-button>

              <el-button v-if="index !== 24"
                :type="(activity.timestamp).slice(0, 2) + ':15' == timeNow ? 'primary' : 'info'" size="mini"
                @click="changeTimeEvt(activity, '15', 1)">{{
                  addMinutesToTime(activity.timestamp, "15", index)
                }}</el-button>
              <el-button v-if="index !== 24"
                :type="(activity.timestamp).slice(0, 2) + ':30' == timeNow ? 'primary' : 'info'" size="mini"
                @click="changeTimeEvt(activity, '30', 2)">{{
                  addMinutesToTime(activity.timestamp, "30", index)
                }}</el-button>
              <el-button v-if="index !== 24"
                :type="(activity.timestamp).slice(0, 2) + ':45' == timeNow ? 'primary' : 'info'" size="mini"
                @click="changeTimeEvt(activity, '45', 3)">{{
                  addMinutesToTime(activity.timestamp, "45", index)
                }}</el-button>

              <el-timeline-item slot="reference" style="cursor: pointer" :class="[
                index == currentHour ? 'timeline-wrap2' : 'timeline-wrap',
              ]" size="large" color="#ccc" :timestamp="activity.timestamp">

                <div :class="[
                  activity.type == '0'
                    ? 'timeline-abs'
                    : activity.type == '1'
                      ? 'timeline-abs abs-red'
                      : 'timeline-abs abs-yellow',
                ]"></div>
                <img v-if="activity.status == '1'" src="@/assets/images/icon-top.png" class="timeline-icon" />
                <img v-if="activity.status == '2'" src="@/assets/images/icon-bottom.png" class="timeline-icon" />
              </el-timeline-item>
            </el-popover>
          </el-timeline>

          <div class="timeline-legend" style="width: 100%; margin-top: 10px">
            <div class="status1">越限</div>
            <div class="status2">重载</div>
            <div class="type1">正向</div>
            <div class="type2">反向</div>
          </div>
        </div>
        <div class="right">
          <div style="width: 100%; height: 100%" id="map" ref="map"></div>
          <div class="map-legend">
            <div class="legend-row" v-for="(item, index) in mapLegend" :key="index">
              <img :src="require('@/assets/images/' + item.img + '.png')" />
              <span>{{ item.text }}</span>
            </div>
          </div>
          <div v-show="!is_TckTable" class="chart-float" :class="{ noshow: !mapChartShow }" :style="{
            top: floatChartInfo.offsetY + 'px',
            left: floatChartInfo.offsetX + 'px',
          }">
            <div class="title" style="position: relative;">
              <!-- <span class="fanhui" 
            >返回</span> -->

              <el-button style="position: absolute;left: 0px;top:-3px;" size="mini" @click="mapChartClose1()"
                type="primary" icon="el-icon-back" circle></el-button>

              {{ floatChartInfo.title }}
              <span class="close" @click="mapChartClose()">X</span>
            </div>
            <div class="tabs">

              <div class="tab" style="font-size: 12px;">最严重时刻潮流值:{{ Number(this.seriousValue).toFixed(2) }}MW({{
                this.timeNow }})</div>
              <div class="tab" style="font-size: 12px;">负载率:{{ this.fzl }}%</div>
            </div>
            <div class="chart" id="floatchart" ref="floatchart"></div>
          </div>

          <div v-show="is_TckTable" class="chart-float" :class="{ noshow: !mapChartShow }" :style="{
            top: floatChartInfo.offsetY + 'px',
            left: floatChartInfo.offsetX + 'px',
          }">

            <div class="title">
              {{ floatChartInfo.title }}
              <span class="close" @click="mapChartClose()">X</span>
            </div>

            <el-table border max-height="230" height :data="TcktableData">
              <el-table-column prop="device_name" align="center" label="资源名称" width="180">
              </el-table-column>
              <el-table-column prop="dev_rate" align="center" label="负载率">
                <template slot-scope="scope">
                  {{ scope.row.dev_rate }} %
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="scope">
                  <el-button type="primary" size="mini" @click="handleTckEdit(scope.$index, scope.row)">查看</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- </div> -->
          </div>
        </div>
      </div>
      <div class="container_right">
        <div class="part">
          <div class="title">
            <div class="myTitleType">
              <div class="tit1" @click="changeYxType(1)">正向越限</div>
              <div class="tit2" @click="changeYxType(2)">反向越限</div>
            </div>
            <span>单位:MW</span>
          </div>
          <div class="tabs">
            <div class="tab-1">
              <div v-for="(item, index) in tab1List" :key="index" @click="selTab1Option(item)">
                <span class="tab1-btn" :class="{ tab1Selected: item.isActive }">{{ item.text }}</span>
              </div>
            </div>
            <div class="tab-panel">
              <div v-for="(item, index) in tab2List" :key="index" @click="selTab2Option(item)">
                <span class="option-btn" :class="{ btnSelected: item.isActive }">{{ item.text }}</span>
              </div>
            </div>
          </div>
          <div class="content" style="height: calc(100% - 100px); overflow: auto ; ">
            <div class="record" v-for="(item, index) in forwardList" :key="index">
              <div class="row1">
                <div class="row-name" :style="{
                  color:
                    item.dev_rate >= 100
                      ? '#ed4646'
                      : item.dev_rate >= 85 && item.dev_rate < 100
                        ? '#d3ba58'
                        : '#d3ba58',
                }">
                  {{ item.dev_name }}
                </div>
                <div v-if="seriousType == '全天最严重'" class="row-time">{{ item.over_time }}</div>
                <el-button type="primary" round size="mini" @click="jumpPageAd(item)">调节资源</el-button>

              </div>
              <div class="row2">
                <div class="info">
                  <div class="label">最大值：</div>
                  <div class="val">{{ Number(item.dev_p).toFixed(2) }}</div>
                </div>
                <div class="info">
                  <div class="label">限值：</div>
                  <div class="val">{{ Number(item.dev_se).toFixed(2) }}</div>
                </div>
                <div class="info" @click="openFzDialog(item)" style="cursor: pointer;">
                  <div class="label">负载率</div>
                  <el-progress class="progress" :stroke-width="8" :percentage="item.dev_rate" :show-text="false" :color="item.dev_rate >= 100
                    ? '#ed4646'
                    : item.dev_rate >= 85 && item.dev_rate < 100
                      ? '#d3ba58'
                      : '#d3ba58'
                    "></el-progress>
                  <div class="val" :style="{
                    color:
                      item.dev_rate >= 100
                        ? '#ed4646'
                        : item.dev_rate >= 85 && item.dev_rate < 100
                          ? '#d3ba58'
                          : '#d3ba58',
                  }">
                    {{ Number(item.dev_rate).toFixed(2) }}%
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="part" style="margin-top: 10px">
          <div class="title bg">省调下发<span></span></div>
          <div class="sdXfContent">
            <div style="margin-top: 20px;" v-for="(it,index) in sdxfData" :key="it" class="contentLine" @click="jumpPage">
              <div class="num">{{ index + 1 }}</div>
              <div class="text">{{ it }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import mock from "@/utils/home/home.mockdata.js";
import homeMap from "@/utils/home/home.map";
import {
  seriousDevice,
  getYxPoints,
  timeAxis,
  getYxInfoByDvId,
  momentSerious,
  getInfoByDvId,
  dvStatistics,
  provinceNeed
} from "@/api/index";


// 引入mock的数据
import { seriousDevice_Data, YxMockData, duiyingGx, resource_timelineList } from './mock'


export default {
  name: "balance-city",
  data() {
    return {
      myDialogVisble: false,
      sdxfData :[],


      YxType: 1,
      fzl: '',
      myMapData1: [],
      myMapData2: [],
      seriousValue: '',

      seriousType: '全天最严重',

      YxInfoParams: {
        devType: "",
        dvId: '',
      },
      sDparams: {
        // 设备类型 1312-主变, 0408-馈线
        devType: "1312",
      },
      YxParams: {
        devId: '',
      },

      YxParams: {
        devId: '',
      },

      timePointParams: {
        time: '01:00',
        devType: "1312"
      },
      timePointParams2: {
        time: ''
      },

      is_TckTable: true,
      TcktableData: [],
      timeNow: '',     // 时刻
      myTimeData: '',  //日期
      currentHour: '',
      params: {
        dataTime: '',
        dataType: '',
      },
      buttonType: 5,

      tab1List: [
        { text: "全天最严重", id: 0, isActive: true },
        { text: "00:00最严重", id: 1, isActive: false },
      ],
      tab2List: [
        { text: "主变", id: 0, isActive: true },
        { text: "馈线", id: 1, isActive: false },
      ],
      forwardList: [

      ],
      reverseList: [

      ],
      timeLineList: resource_timelineList,

      mapLegend: [
        { text: "变电站", img: "bdz" },
        { text: "线路", img: "line" },
        { text: "设备正向过载", img: "forwardload" },
        { text: "设备反向过载", img: "reverseload" },
      ],
      mapJson: {},
      mapChart: undefined,
      opacityTimer: null,
      mapChartOption: {
        // toolbox: {
        //   show: true,
        //   orient: "vertical",
        //   left: "right",
        //   top: "center",
        // },
        series: [
          {
            name: "平衡分析",
            type: "map",
            z: 1,
            map: this.$store.state.home.mapCity,
            label: {
              show: true,
              color: "#ffffff",
            },
            labelLine: {
              show: true,
              length: 15,
              length2: 10,
              minTurnAngle: 90,
              maxSurfaceAngle: 180,
              lineStyle: {
                type: "dashed",
                cap: "round",
              },
              /*length: 15,
              length2: 10,
              maxSurfaceAngle: 80*/
            },
            itemStyle: {
              normal: {
                // 静态的时候显示的默认样式
                borderWidth: 1, // 边框宽度
                areaColor: {
                  type: "linear",
                  x: 0.5,
                  y: 0.5,
                  r: 0.9,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#59bcc2", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "#82CBBE", // 100% 处的颜色
                    },
                  ],
                  globalCoord: false, // 缺省为 false
                },
                borderColor: "#ffffff", // 边框颜色
              },
              emphasis: {
                // 鼠标移入动态的时候显示的默认样式
                borderWidth: 2, // 边框宽度
                areaColor: "#0979A9", // 地图颜色
              },
            },
            silent: true, //点击区块不响应鼠标事件
            data: [],
          },
        ],
        geo: {
          geoIndex: 1,
          map: this.$store.state.home.mapCity,
          label: {
            show: false,
          },
          zoom: 1,
        },
      },
      floatChartInfo: {
        title: "",
      },
      mapChartShow: false,
      floatchart: undefined,
      floatchartOption: {
        color: ["#2bb193", "#f4b066"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "预测潮流",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "限值",
            type: "line",
            lineStyle: {
              type: "dashed",
            },
            data: [200, 200, 200, 200, 200, 200, 200],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },

      floatchartOption2: {
        color: ["#2bb193", "#f4b066"],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          top: "6%",
          type: "plain",
        },
        grid: {
          left: "3%",
          right: "6%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: ["00:15", "05:00", "09:45", "14:30", "19:15", "24:00"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "预测潮流",
            type: "line",
            data: [220, 132, 301, 234, 190, 230, 110],
            smooth: true,
            symbolSize: 0,
          },
          {
            name: "限值",
            type: "line",
            lineStyle: {
              type: "dashed",
            },
            data: [200, 200, 200, 200, 200, 200, 200],
            smooth: true,
            symbolSize: 0,
          },
        ],
      },
    };
  },
  computed: {
    mapCity: {
      get() {
        return this.$store.state.home.mapCity;
      },
    },
  },
  created() {
    this.currentHour = new Date().getHours();
    this.timeNow = this.getLast15Minutes(new Date());
    this.tab1List[1].text = this.timeNow + '最严重'

    this.timePointParams.time = this.timeNow


    // 全天最严重设备
    this.useMyseriousDevice()
    // 时间轴
    this.useMytimeAxis()

    this.useMyprovinceNeed()




    //地图上的图标
    // this.useMydvStatistics()

  },
  mounted() {
    this.mapJson = require("@/utils/home/mapJson/" + this.mapCity + ".json");
    //地图
    echarts.registerMap(this.mapCity, this.mapJson);
    this.mapChart = echarts.init(this.$refs.map);
    let opt = {
      type: "lines",
      z: 2,
      coordinateSystem: "geo",
      symbolSize: [0, 0],
      lineStyle: {
        width: 3.5,
        type: "solid",
        opacity: 0.8,
        color: "#e6fff8",
        curveness: 0,
      },
      data: this.convertLineData(),
    };
    this.mapChartOption.series.push(opt);

    let myData = this.convertImgData()
    // 添加标记点
    let pointOpt = {
      name: "标记点",
      type: "scatter",
      coordinateSystem: "geo",
      z: 3,
      data: myData,
      symbolSize: 45,
      label: {
        show: false,
        formatter: function (params) {
          //文本提示框
          return params.value[2];
        },
        position: "right",
      },
    };
    this.mapChartOption.series.push(pointOpt);

    this.useMydvStatistics()

    // this.initMyMap()  // 放在这个接口的里面  测试图标闪烁使用
    // this.mapChart.setOption(this.mapChartOption);
    //给变电站加点击事件
    this.mapChart.on("click", (params) => {
      // this.YxInfoParams.dvId = duiyingGx(params.name)
      this.YxInfoParams.dvId = (params.name)
      if (params.data.label.color == 'red') {
        this.YxInfoParams.devType = '0'
      } else {
        this.YxInfoParams.devType = '1'
      }
      console.log(params.data.label.color, '999999');
      this.useMygetYxInfoByDvId()
      if (params.seriesIndex == 2) {
        if (params.dataIndex >= 7) {
          // this.mapChartClose();
          //弹出echarts
          this.floatChartInfo.title = params.data.info;
          this.floatChartInfo.offsetX = params.event.offsetX - 400;
          this.floatChartInfo.offsetY =
            params.event.offsetY + 380 > 980 ? 500 : params.event.offsetY;
          this.mapChartShow = true;
        }
      }
    });

    //默认显示一个隐联线02 ---南京测试用
    // if (this.mapCity == "nanjing") {
    //   this.floatChartInfo.title = "隐联线02";
    //   this.floatChartInfo.offsetX = 26;
    //   this.floatChartInfo.offsetY = 362;
    //   this.mapChartShow = true;
    //   this.$nextTick(() => {
    //     if (this.floatchart == undefined) {
    //       this.floatchart = echarts.init(this.$refs.floatchart);
    //     }
    //     this.floatchartOption &&
    //       this.floatchart.setOption(this.floatchartOption);
    //   });
    // }
  },
  methods: {

    useMyprovinceNeed() {
      provinceNeed().then(res => {
        if (res.code !== 200) return

        this.sdxfData = res.data.slice(0, 2);

       



        // console.log(res.data , "useMyprovinceNeed")
        // res.data.forEach(it=>{
        //   this.sdxfData.push(it)
        // })

        console.log(this.sdxfData , "sdxfData")

      })
    },

    jumpPageAd(it) {
      console.log(it)
      // this.$router.push("/jumpPage2")
      // this.$emit('resource-reload',);
      // this.$emit('home-reload')
      this.$emit("redirect", "resource", "didiao");

      sessionStorage.setItem('resouse_PageType', '1')
      sessionStorage.setItem('Name_zi', it.dev_name)
      sessionStorage.setItem('resouse_Message', JSON.stringify(it))
    },
    openFzDialog(it) {
      this.fzl = Number(it.dev_rate).toFixed(2)
      console.log(it, '看it地数据')
      this.myDialogVisble = true

      let params = {
        deviceId: it.dev_id,
        time: this.timeNow
      }

      getInfoByDvId(params).then(res_1 => {
        if (res_1.code !== 200) return
        console.log(res_1.data, 'dev_se');
        this.seriousValue = Number(res_1.data.dev_p).toFixed(2) || "未知"
        this.is_TckTable = false
        this.YxParams.devId = it.dev_id
        // 渲染曲线
        getYxPoints(this.YxParams).then(res => {
          if (res.code !== 200) return
          res.data = res.data.slice(1)
          let xData = []
          let yData = []
          let limitData = []

          res.data.forEach(it => {
            xData.push(it.x)
            yData.push(Number(it.y).toFixed(2))
            limitData.push(Number(res_1.data.dev_se).toFixed(2) || 0)
          })

          console.log(res_1.data.dev_se, '限值没有给到 为null 暂时给0');

          this.floatchartOption2.xAxis.data = xData
          this.floatchartOption2.series[0].data = yData  // 0 的时候是预测潮流
          this.floatchartOption2.series[1].data = limitData  // 1 的时候限值
          this.initMydialogEcharts()

        })

      })


    },
    jumpPage() {
      this.$router.push("/jumpPage")
    },

    initMydialogEcharts() {
      this.$nextTick(() => {
        const chartDom = this.$refs.dialogEchartRef
        const myChart = echarts.init(chartDom)
        myChart.setOption(this.floatchartOption2)
      })

    },

    changeYxType(type) {
      {
        this.YxType = type
        if (this.seriousType == '全天最严重') {
          this.useMyseriousDevice()
        } else {
          this.getTimePointSeriousEvt()
        }
      }
    },


    useMydvStatistics() {
      dvStatistics(this.timePointParams2).then(res => {
        if (res.code !== 200) return

        this.myMapData1 = []
        this.myMapData2 = []

        res.data.forEach(it => {
          this.myMapData1.push({
            name: it.dvName,
            guozaiType: 1,
            number: it.forwardNum,
          })
          this.myMapData2.push({
            name: it.dvName,
            guozaiType: 0,
            number: it.reverseNum,
          })
        })

        this.initMyMap()  // 放在这个接口的里面 

      })

    },

    initMyMap() {

      let mapData1 = this.convertImgData()
      let a = this.convertImgData2()
      let b = this.convertImgData3()


      let mapData2 = [
        {
          name: "六合区",
          value: [118.835525, 32.476702, 55],
          symbol: "image://" + require("@/assets/images/mapforward.png"),
          symbolSize: 45,
          label: {
            formatter: "{@[2]}",
            position: "right",
            show: true,
            color: "red",
          },
          itemStyle: {
            opacity: 1,
          },
          emphasis: {
            // itemStyle: {
            //   opacity: 0.9, 
            // },
          }  // 悬浮时候修改透明度
        },

      ];

      mapData2 = [...a, ...b]
      mapData2 = mapData2.filter(it => {
        return it.value[2] != 0
      })

      clearInterval(this.opacityTimer)


      this.opacityTimer = setInterval(() => {

        // console.log(mapData2,'didiid1');

        if (mapData2.length == 0) {

          this.mapChartOption.series[2].data = mapData1
          this.mapChart.setOption(this.mapChartOption);
          clearInterval(this.opacityTimer)
        } else {
          if (mapData2[0].itemStyle.opacity == 0.3) {
            mapData2.forEach(it => {
              it.itemStyle.opacity = 1
            })
          } else if (mapData2[0].itemStyle.opacity = 1) {
            mapData2.forEach(it => {
              it.itemStyle.opacity = 0.3
            })
          }
          let mapData3 = [...mapData1, ...mapData2]
          this.mapChartOption.series[2].data = mapData3
          this.mapChart.setOption(this.mapChartOption);
        }



      }, 1200);

    },


    // 获取某个时刻最严重的接口
    getTimePointSeriousEvt() {
      momentSerious(this.timePointParams).then(res => {
        res.data.forEach(it => {
          it.dev_rate = it.dev_rate * 100
        })

        let Resdata = res.data
        let fxData = []
        let zsData = []
        Resdata.forEach(it => {
          if (it.over_type == 1) {   // 0是正向吗？
            fxData.push(it)
          } else {
            zsData.push(it)
          }
        })

        fxData = fxData.sort((a, b) => {
          return b.dev_rate - a.dev_rate
        }).slice(0, 6)

        zsData = zsData.sort((a, b) => {
          return b.dev_rate - a.dev_rate
        }).slice(0, 6)


        if (this.YxType == 1) {
          this.forwardList = zsData
        } else {
          this.forwardList = fxData
        }

      })

    },
    generateArrayFromObject(obj) {
      const result = [];
      for (const timestamp in obj) {
        const [value, status, type] = obj[timestamp].split('||');
        const [, color] = value.split('_');

        const newItem = {
          timestamp,
          type: type === '0' ? '1' : '2',
          status: color === 'red' ? '1' : color === 'yellow' ? '2' : '0'
        };
        result.push(newItem);
      }
      return result;
    },

    // 根据地区id获取设备越限信息
    useMygetYxInfoByDvId() {
      console.log(this.YxInfoParams, 'newData筛选条件');
      dvStatistics(this.timePointParams2).then(res => {

        let newData = []
        res.data.forEach(it => {
          if (it.dvName == this.YxInfoParams.dvId) {
            newData.push(it.devices)
          }
        })

        // console.log(newData,'newData');
        let newData2 = []
        newData[0].forEach(it => {
          if (it.over_type == this.YxInfoParams.devType) {
            newData2.push(it)
          }
        })

        // 正向和反向设备保留两位小数
        newData2.forEach(it => {
          it.dev_rate = Number(it.dev_rate * 100).toFixed(2)
        })


        this.TcktableData = newData2
        // console.log(newData2,'newData2');
      })
    },


    // // 时间轴
    useMytimeAxis() {
      timeAxis().then(res => {

        res.data.forEach(it => {
          for (let k in it) {
            it[k] = it[k] + "||" + it.over_type
          }
        })

        res.data.forEach(it => {
          delete it.dev_id
          delete it.dev_name
          delete it.dev_p
          delete it.dev_se
          delete it.over_type
          delete it.threshold
        })

        let myObject = this.generateArrayFromObject(this.processData(res.data))

        this.timeLineList.forEach(it => {
          myObject.forEach(et => {
            if (it.timestamp == et.timestamp) {
              it.status = et.type
              it.type = et.status
            }
          })
        })
      })
    },

    processData(data) {
      return data.reduce((result, obj) => {
        for (let key in obj) {
          const [num, color] = obj[key].split('_');
          if (!result[key] || parseFloat(num) > parseFloat(result[key].split('_')[0])) {
            result[key] = obj[key];
          }
        }
        return result;
      }, {});
    },


    // 全天最严重设备
    useMyseriousDevice() {

      // 接口部分
      seriousDevice(this.sDparams).then(res => {
        if (res.code !== 200) return
        res.data.forEach(it => {
          it.dev_rate = it.dev_rate * 100
        })


        let Resdata = res.data
        let fxData = []
        let zsData = []
        Resdata.forEach(it => {
          if (it.over_type == 1) {   // 0是正向吗？
            fxData.push(it)
          } else {
            zsData.push(it)
          }
        })

        fxData = fxData.sort((a, b) => {
          return b.dev_rate - a.dev_rate
        })

        zsData = zsData.sort((a, b) => {
          return b.dev_rate - a.dev_rate
        })

        console.log(fxData, '数据');
        console.log(zsData, '数据');

        if (this.YxType == 1) {
          this.forwardList = zsData
        } else {
          console.log(fxData, '看一眼反向的数据')
          this.forwardList = fxData
        }
      })
    },

    mapChartClose() {
      this.mapChartShow = false;
      this.is_TckTable = true
      this.floatchart.clear(); //清空图表内容
    },
    mapChartClose1() {
      // this.mapChartShow = true;
      this.is_TckTable = true
      this.floatchart.clear(); //清空图表内容
    },


    // 点击表格后查看的事件
    handleTckEdit(index, it) {
      this.fzl = Number(it.dev_rate).toFixed(2)
      console.log(it, '999');
      let params = {
        deviceId: it.device_id,
        time: this.timeNow
      }

      getInfoByDvId(params).then(res_1 => {
        if (res_1.code !== 200) return
        console.log(res_1.data, 'dev_se');
        this.seriousValue = Number(res_1.data.dev_p).toFixed(2) || "未知"
        this.is_TckTable = false
        this.YxParams.devId = it.device_id
        // 渲染曲线
        getYxPoints(this.YxParams).then(res => {
          if (res.code !== 200) return
          res.data = res.data.slice(1)
          let xData = []
          let yData = []
          let limitData = []

          res.data.forEach(it => {
            xData.push(it.x)
            yData.push(Number(it.y).toFixed(2))
            limitData.push(Number(res_1.data.dev_se).toFixed(2) || 0)
          })

          console.log(res_1.data.dev_se, '限值没有给到 为null 暂时给0');

          this.floatchartOption.xAxis.data = xData
          this.floatchartOption.series[0].data = yData  // 0 的时候是预测潮流
          this.floatchartOption.series[1].data = limitData  // 1 的时候限值
          this.$nextTick(() => {
            if (this.floatchart == undefined) {
              this.floatchart = echarts.init(this.$refs.floatchart);
            }
            this.floatchartOption &&
              this.floatchart.setOption(this.floatchartOption);
          });
        })

      })



    },



    // 根据设备id绘制越限曲线
    useMygetYxPoints() {
      // let ResData = YxMockData.data


    },

    //获取当前时间最接近的15分钟时间节点
    getLast15Minutes(currentTime) {
      if (!currentTime) {
        var time = new Date();
      }
      var time = new Date(currentTime); // 创建一个当前时间的副本
      // 获取当前时间的分钟数
      var minutes = time.getMinutes();
      // 计算上一个15分钟时间节点的分钟数
      var last15Minutes = Math.floor(minutes / 15) * 15;
      // 设置时间的分钟数为上一个15分钟时间节点的分钟数
      time.setMinutes(last15Minutes);
      time.setSeconds(0); // 确保秒数为0，避免误差
      var h = time.getHours();
      var m = time.getMinutes();
      if (m < 10) {
        m = "0" + m;
      }
      return h + ":" + m;
    },


    // 拼接时间的方法
    addMinutesToTime(timeStr, minutes) {
      // 将时间字符串拆分成小时和分钟部分
      const [hours, minutesStr] = timeStr.split(":");
      const minutesNum = parseInt(minutesStr, 10);
      // 将分钟部分加上 30 分钟
      const newMinutes = (minutesNum + minutes) % 60;
      // 计算新的小时部分
      const newHours =
        parseInt((minutesNum + minutes) / 60, 10) + parseInt(hours, 10);
      // 将更新后的小时和分钟部分重新拼接成新的时间字符串
      return `${String(newHours).padStart(2, "0")}:${String(
        newMinutes
      ).padStart(2, "0")}`;
    },

    // 修改时间后触发的方法
    changeTimeEvt(it, time, buttonType, index) {

      this.currentHour = it.timestamp.slice(0, 2);
      this.timeNow = this.addMinutesToTime(it.timestamp, time);

      // if(this.timeNow == '24:00') return

      this.seriousType = '时刻最严重'
      this.tab1List[0].isActive = false
      this.tab1List[1].isActive = true
      this.timePointParams.time = this.timeNow
      this.getTimePointSeriousEvt()
      this.tab1List[1].text = this.timeNow + '最严重';
      this.timePointParams2.time = this.timeNow

      this.useMydvStatistics()

    },



    // 增加日期的方法
    addOneDay(dateTimeString) {
      const dateTime = new Date(dateTimeString);
      const nextDay = new Date(dateTime.getTime() + 24 * 60 * 60 * 1000);

      // 处理闰年情况
      if (nextDay.getDate() === 1 && nextDay.getMonth() === 0) {
        nextDay.setFullYear(nextDay.getFullYear(), 1, 1);
      }
      return nextDay.toISOString().slice(0, 19).replace("T", " ");
    },


    //最严重的table 
    selTab1Option(data) {
      if (!data.isActive) {
        this.tab1List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
      }


      if (data.text == "全天最严重") {
        this.seriousType = data.text
        this.useMyseriousDevice()
      } else {
        // 这边调用某个时刻最严重的接口
        // it.text.slice()
        // 时刻最严重设备 
        this.seriousType = data.text
        this.getTimePointSeriousEvt()
      }

    },

    // 调用渲染最严重的接口来进行数据的渲染 
    selTab2Option(data) {
      if (!data.isActive) {
        this.tab2List.forEach(function (obj) {
          obj.isActive = false;
        });
        data.isActive = true;
      }

      if (data.text == '主变') {
        this.timePointParams.devType = '1312'
        this.sDparams.devType = '1312'

        if (this.seriousType == '全天最严重') {
          // 全天最严重设备
          this.useMyseriousDevice()
        } else {
          // 时刻最严重设备
          this.getTimePointSeriousEvt()
        }


      } else {

        this.timePointParams.devType = '0408'
        this.sDparams.devType = '0408'

        if (this.seriousType == '全天最严重') {
          // 全天最严重设备
          this.useMyseriousDevice()
        } else {
          // 时刻最严重设备
          this.getTimePointSeriousEvt()
        }

      }
    },
    convertImgData() {
      //一些地图中心点变电站
      let mapData = [
        { name: "六合区", img: "mapbdz" },
        { name: "浦口区", img: "mapbdz" },
        { name: "栖霞区", img: "mapbdz" },
        { name: "雨花台区", img: "mapbdz" },
        { name: "江宁区", img: "mapbdz" },
        { name: "溧水区", img: "mapbdz" },
        { name: "高淳区", img: "mapbdz" },
      ];
      let resDatas = [];
      for (let i = 0; i < this.mapJson.features.length; i++) {
        let tmpItem = mapData.find(
          (x) => x.name == this.mapJson.features[i].properties.name
        );
        let resItem = {};
        if (tmpItem) {
          resItem.name = tmpItem.name;
          resItem.value = this.mapJson.features[i].properties.center.concat(
            parseInt(Math.random() * 100)
          );
          resItem.symbol =
            "image://" + require("@/assets/images/" + tmpItem.img + ".png");
          resDatas.push(resItem);

        }

      }
      return resDatas;
    },

    // 随机点
    convertImgData2() {
      console.log(this.myMapData1, '444444444随机点');
      // let myMap = [
      //   // { name: "鼓楼区", guozaiType: 0, number: 10, },
      //   // { name: "六合区", guozaiType: 0, number: 12, },
      //   // { name: "江宁区", guozaiType: 0, number: 12, },
      //   // { name: "浦口区", guozaiType: 0, number: 12, },
      //   // { name: "高淳区", guozaiType: 0, number: 12, },
      //   { name: "南京电网", guozaiType: 0, number: 12, },
      // ]

      let myMap = this.myMapData1

      let diqvData = [
        {
          name: '六合区',
          position: [118.835525, 32.476702]
        },
        {
          name: '江宁区',
          position: [118.987419, 31.95338]
        },
        {
          name: '南京电网',
          position: [118.780000, 31.800000]

        },
        {
          name: '浦口区',
          position: [118.499495, 31.963766]
        },
        {
          name: '高淳区',
          position: [118.893322, 31.266745]
        },
        {
          name: '溧水区',
          position: [118.996456, 31.42117]
        },
        {
          name: '栖霞区',
          position: [118.940000, 32.120000]
        },
        {
          name: '雨花台区',
          position: [118.805000, 31.990000]
        },
        {
          name: '建邺区',
          position: [118.775000, 32.025000]
        },
        {
          name: '鼓楼区',
          position: [118.800000, 32.055000]
        },
        {
          name: '秦淮区',
          position: [118.815000, 32.040000]
        },
        {
          name: '玄武区',
          position: [118.815000, 32.065000]
        }

      ];

      myMap.forEach(it => {
        diqvData.forEach(et => {
          if (it.name == et.name) {
            it.value = [...et.position, it.number]
          }
        })
      })

      let myMap2 = this.generateNewMap(myMap)
      return myMap2

    },


    // 随机点
    convertImgData3() {

      // let myMap = [
      // { name: "鼓楼区", guozaiType: 1, number: 10, },
      // { name: "六合区", guozaiType: 1, number: 12, },
      // { name: "江宁区", guozaiType: 1, number: 12, },
      // { name: "浦口区", guozaiType: 1, number: 12, },
      // { name: "高淳区", guozaiType: 1, number: 12, },
      // { name: "溧水区", guozaiType: 1, number: 12, },
      //  { name: "南京电网", guozaiType: 1, number: 12, },
      // ]

      let myMap = this.myMapData2


      let diqvData = [
        {
          name: '六合区',
          position: [118.873302, 32.428604]
        },
        {
          name: '江宁区',
          position: [119.018758, 31.922697]
        },
        {
          name: '南京电网',
          position: [118.580000, 31.800000]
        },
        {
          name: '浦口区',
          position: [118.469724, 31.991561]
        },
        {
          name: '高淳区',
          position: [118.959307, 31.300233]
        },
        {
          name: '溧水区',
          position: [119.019442, 31.388544]
        },
        {
          name: '栖霞区',
          position: [118.968611, 32.090278]
        },
        {
          name: '雨花台区',
          position: [118.778056, 31.969444]
        },
        {
          name: '建邺区',
          position: [118.749722, 32.052500]
        },
        {
          name: '鼓楼区',
          position: [118.776667, 32.031111]
        },
        {
          name: '秦淮区',
          position: [118.795000, 32.013889]
        },
        {
          name: '玄武区',
          position: [118.795000, 32.043056]
        }
      ];

      myMap.forEach(it => {
        diqvData.forEach(et => {
          if (it.name == et.name) {
            it.value = [...et.position, it.number]
          }
        })
      })



      let myMap2 = this.generateNewMap(myMap)
      return myMap2

    },
    generateNewMap(myMap) {
      return myMap.map(item => {
        let symbol, color;
        if (item.guozaiType === 0) {
          symbol = "image://" + require("@/assets/images/mapreverse.png");
          color = "yellow";
        } else {
          symbol = "image://" + require("@/assets/images/mapforward.png");
          color = "red";
        }

        return {
          name: item.name,
          value: item.value,
          symbol: symbol,
          symbolSize: 45,
          label: {
            formatter: "{@[2]}",
            position: "right",
            show: true,
            color: color
          },
          itemStyle: {
            opacity: 1,
          },
          //    emphasis: {
          //   itemStyle: {
          //     opacity: 0.9, 
          //   },
          // }
        }
      })
    },



    convertLineData() {
      let resDatas = [];
      //一些地图内线
      let mapdata = [
        {
          name: "六合-栖霞",
          coords: [
            [118.85065, 32.340655],
            [118.808702, 32.102147],
          ],
          info: "隐联线01",
        },
        {
          name: "六合-浦口",
          coords: [
            [118.85065, 32.340655],
            [118.625307, 32.05839],
          ],
          info: "隐联线02",
        },
        {
          name: "栖霞-浦口",
          coords: [
            [118.808702, 32.102147],
            [118.625307, 32.05839],
          ],
          info: "隐联线03",
        },
        {
          name: "浦口-雨花台",
          coords: [
            [118.625307, 32.05839],
            [118.77207, 31.995946],
          ],
          info: "隐联线04",
        },
        {
          name: "雨花台-江宁3",
          coords: [
            [118.77207, 31.995946],
            [118.858638, 31.833693],
          ],
          info: "隐联线05",
        },
        {
          name: "溧水-溧水1",
          coords: [
            [119.028732, 31.653061],
            [118.996456, 31.42117],
          ],
          info: "隐联线06",
        },
        {
          name: "雨花台-江宁1",
          coords: [
            [118.77207, 31.995946],
            [119.016165, 32.103257],
          ],
          info: "隐联线07",
        },
        {
          name: "雨花台-江宁2",
          coords: [
            [118.77207, 31.995946],
            [118.987419, 31.95338],
          ],
          info: "隐联线08",
        },
        {
          name: "江宁1-江宁2",
          coords: [
            [119.016165, 32.103257],
            [118.987419, 31.95338],
          ],
          info: "隐联线09",
        },
        {
          name: "江宁3-江宁2",
          coords: [
            [118.858638, 31.833693],
            [118.987419, 31.95338],
          ],
          info: "隐联线10",
        },
        {
          name: "溧水-江宁3",
          coords: [
            [119.028732, 31.653061],
            [118.858638, 31.833693],
          ],
          info: "隐联线11",
        },
      ];
      resDatas = resDatas.concat(mapdata);
      return resDatas;
    },
  },
};
</script>

<style scoped lang="scss">
.black_marker {
  //  opacity:0.3,
}


.container_main {
  display: flex;
  position: relative;

  .FzDiaoBox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 500px;
    z-index: 999;
    // background-color: #fff;
    background: url(../../../assets/images/legend-bg.png) center no-repeat;
    background-size: 100% 100%;
    padding: 20px;
    box-sizing: border-box;

    .title {
      height: 40px;
      line-height: 40px;
      font-weight: 600;
      font-size: 18px;
      display: flex;
      justify-content: space-around;

      .tab {
        background: url("../../../assets/images/popup-bg.png") center no-repeat;
        width: 300px;
        text-align: center;
      }
    }

    .dialogEchart {
      margin: 0 auto;
      width: 100%;
      height: 400px;
    }
  }

  .container_left {
    width: 60%;
    height: 930px;
    display: flex;

    .left {
      width: 12%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
    }

    .right {
      width: 88%;
      height: 100%;
      position: relative;

      .chart-float {
        position: absolute;
        z-index: 9999;
        background-color: rgb(255, 255, 255, 0.8);
        left: 10px;
        top: 10px;
        width: 380px;
        height: 280px;
        padding: 10px;
        border: 1px solid #2eadd3;
        border-radius: 10px;
        box-shadow: 10px 10px 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        &.noshow {
          display: none;
        }

        .title {
          width: 100%;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-bottom: 1px solid #2eadd3;
          color: #2d3b4d;
          font-size: 16px;
          font-weight: 600;

          .close {
            float: right;
            width: 20px;
            height: 20px;
            line-height: 20px;
            border: 1px solid #2e6e6a;
            border-radius: 20px;
            cursor: pointer;
            color: #2e6e6a;

          }
        }

        .tabs {
          display: flex;
          justify-content: center;
          align-items: center;
          height: 50px;

          .tab {
            background: url("../../../assets/images/popup-bg.png") center no-repeat;
            background-size: 100% 100%;
            font-size: 14px;
            height: 40px;
            line-height: 40px;
            padding: 5px 15px;
            color: #000000;
            font-weight: 500;
          }
        }

        .chart {
          width: 100%;
          height: 200px;
          position: relative;
        }
      }

      .map-legend {
        position: absolute;
        z-index: 100;
        right: 20px;
        top: 40px;
        width: 270px;
        height: 80px;
        padding: 10px 15px;
        background: url(../../../assets/images/legend-bg.png) center no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: flex-start;

        .legend-row {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          width: 50%;
          height: 28px;
          line-height: 28px;

          img {
            width: 20px;
            height: 20px;
            margin-right: 5px;
          }

          span {
            font-size: 14px;
            color: #2b2f3a;
          }
        }
      }
    }
  }

  .container_right {
    width: 39%;
    height: 887px;
    background: url(../../../assets/images/box-total.png) no-repeat;
    background-size: 100% 100%;
  }

  .part {
    width: 100%;
    height: 50%;
    position: relative;
    // .fxYxian{
    //   position: absolute;
    //   width: 100px;
    //   height: 20px;
    //   z-index: 999;
    //   top:10px;
    //   left: 20px;
    //   background: red;
    // }


    .tabs {
      width: 100%;
      height: 35px;
      margin-top: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;

      .tab-1 {
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .tab1-btn {
        display: block;
        width: 160px;
        height: 35px;
        line-height: 35px;
        text-align: center;
        /* border-radius: 12px; */
        cursor: pointer;
        font-size: 14px;
        color: #00706b;
        background: url(../../../assets/images/rightImages/tab2.png) center no-repeat;
        background-size: 100% 100%;
      }

      .tab1Selected {
        background: url(../../../assets/images/rightImages/tab1.png) center no-repeat;
        background-size: 100% 100%;
        color: #2d3b4d;
      }

      .tab-panel {
        position: absolute;
        right: 20px;
        top: 0;
        width: 200px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
      }

      .option-btn {
        display: block;
        width: 75px;
        height: 35px;
        border: 1px dashed #00706b;
        line-height: 35px;
        text-align: center;
        /* border-radius: 12px; */
        cursor: pointer;
        font-size: 14px;
        background-color: #c5fcff;
        color: #00706b;
      }

      .btnSelected {
        background-color: #00706b;
        color: #ffffff;
      }
    }

    .content {
      width: 100%;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;

      .record {
        width: 100%;
        height: 80px;
        padding: 5px 10px;
        margin: 5px auto;
        background: url(../../../assets/images/frame.png) center no-repeat;
        background-size: 100% 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;

        .row1 {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border-bottom: 1px dashed #d3ba58;

          .row-name {
            background: url(../../../assets/images/zhubian.png) left center no-repeat;
            background-size: 20px 20px;
            padding-left: 25px;
            font-weight: 500;
          }

          .row-time {
            color: #2e393a;
          }
        }

        .row2 {
          width: 100%;
          height: 50%;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .info {
            width: 33%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            .label {
              color: #2e393a;
              font-weight: 500;
              height: 30px;
              line-height: 35px;
            }

            .progress {
              flex: 1;
              margin-left: 5px;
              margin-right: 5px;
              color: red;
            }

            .val {
              color: #00706b;
              font-weight: 600;
              font-size: 18px;
              height: 30px;
              line-height: 35px;
            }
          }
        }
      }
    }

    .title {
      width: 100%;
      height: 35px;
      line-height: 35px;
      font-weight: bold;
      padding-left: 88px;
      padding-right: 20px;

      .myTitleType {
        display: flex;

        .tit1 {
          cursor: pointer;
        }


        .tit2 {
          background: green;
          height: 100%;
          width: 164px;
          text-align: center;
          background: url(../../../assets/images/rightImages/tab1.png) center no-repeat;
          margin-left: 100px;
          cursor: pointer;
        }
      }


      &.bg {
        background: url("../../../assets/images/title-reverse.png") left center no-repeat;
        background-size: 100% 100%;
      }

      span {
        font-size: 12px;
        float: right;
        color: #333;
        font-weight: normal;
      }
    }

    .sdXfContent {
      width: 100%;
      height: 100%;
      padding: 20px 40px 0;
      box-sizing: border-box;



      .contentLine {
        cursor: pointer;
        display: flex;
        // align-items: center;
        width: 100%;
        line-height: 30px;
        border: 1px solid #909399;
        border-radius: 5px;
        background-color: rgba(128, 128, 128, 0.141);
        color: black;
        font-weight: 600;
        max-height: 200px;



        .num {
          width: 20px;
          height: 20px;
          background: #00706a46;
          border-radius: 50%;
          text-align: center;
          line-height: 20px;
          margin: 5px 5px 0;
          color: #fff;
        }

        .text {}
      }
    }
  }
}

.timeline-wrap {
  background: url(../../../assets/images/timeline-bg.png) left top no-repeat;
  background-size: 68px 20px;
  padding-top: 1px;
  position: relative;
  padding-bottom: 8px;
}

.timeline-wrap2 {
  // background: url(../../../assets/images/bacolor.png) left top no-repeat;
  background: url(../../../assets/images/bacolor.png) left top no-repeat;
  background-size: 68px 20px;
  padding-top: 1px;
  position: relative;
  padding-bottom: 8px;
}

.timeline-abs {
  position: absolute;
  left: -3px;
  top: -8px;
  width: 32px;
  height: 24px;
  opacity: 0.7;
  border-radius: 5px;
}

.abs-red {
  background-image: linear-gradient(to left, #eee, #c63c63);
  border: 1px #a10c35;
}

.abs-yellow {
  background-image: linear-gradient(to left, #eee, #eee327);
  border: 1px #989007;
}

.timeline-icon {
  position: absolute;
  left: 0px;
  top: -3px;
  width: 14px;
  height: 14px;
}

.timeline-legend {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 14px;
  color: #4a4a4a;
  padding-left: 40px;

  div {
    background-size: 20px auto;
    padding-left: 23px;
  }

  .status1 {
    background: url(../../../assets/images/status1.png) left center no-repeat;
  }

  .status2 {
    background: url(../../../assets/images/status2.png) left center no-repeat;
  }

  .type1 {
    background: url(../../../assets/images/icon-top.png) left center no-repeat;
  }

  .type2 {
    background: url(../../../assets/images/icon-bottom.png) left center no-repeat;
  }
}

::v-deep .el-progress-bar__outer {
  background: #c1e0dd !important;
}

::v-deep .el-progress.is-success .el-progress-bar__inner {
  background: linear-gradient(to right, #e5f1f2, #408d95) !important;
}

::v-deep .el-icon-circle-check:before {
  content: "";
  display: none;
}


/* 滚动条的宽度 */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条的滑块 */
::-webkit-scrollbar-thumb {
  background-color: #C0C4CC;
  border-radius: 4px;
}

/* 滚动条的背景 */
::-webkit-scrollbar-track {
  background-color: #F2F6FC;
}

/* 当容器被悬停或者活跃时滚动条的滑块 */
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
  background-color: #909399;
}
</style>
